html, body, .task-detail-container {
  height: 100%;
}

body {
  margin: 12px;
  min-width: 1100px;
  // background-color: $bg-color-l1;
  overflow-x: auto;
  overflow-y: hidden;
}

.task-detail-container {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  .bbx-base-tab-bar-box{
    background-color: $bg-color-l2;
  }
  .task-detail-main-content-right{
   min-height: 100%;
  }
  // overflow-y: scroll;

  // 按钮
  .el-button {
    // max-width: 74px;
    min-width: 60px;

    padding-left: 0;
    padding-right: 0;

    font-weight: normal;
    border-radius: 4px;

    &.el-button--small {
      font-size: $font-size-base;
      padding: 8px;
    }
  }

  // 弹窗
  .base-modal {
    .base-modal-body {
      padding: 20px;
  
      .base-modal-content {
        textarea {
          width: 100%;
        }
        .base-modal-textarea {
          width: 70%;
        }
        
        p {
          margin-bottom: 8px;
  
          &.tips {
            color: #999;
            font-size: 12px;
          }

          &.base-upload-placeholder {
            margin-bottom: 0;
          }
        }
      }

      .el-button {
        min-width: auto;
        max-width: auto;
      }
    }
  
    .base-modal-footer {
      text-align: right;
    }

    .task-back-dialog {
      p {
        font-size: 12px;
      }
    }
  }

  // form-view
  .form-view {
    padding: 0;
  }
  
  .form-view-row {
    padding: 6px 0;
  }
  
  // 客户、产品关联工单数量
  .relation-count-button {
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    margin-left: 8px;
    margin-right: 8px;
    font-size: $font-size-small;
    color: $text-color-regular;
    
    background: $color-border-l2;
    border-radius: 2px;
    cursor: pointer;
  }
  
  // 工单状态、已删除
  .task-state,
  .task-delete-status,
  .task-disable-status {
    display: inline-block;
    padding: 0px 8px;
    line-height: 22px;
    font-size: $font-size-small;
    text-align: center;
    
    border: 1px solid;
    border-radius: 11px;
  }
  
  .task-delete-status {
    margin-right: 10px;
    color: #F56C6C;
    border-color: rgba(245, 108, 108, 0.2);
    background-color: rgba(245, 108, 108, 0.2);
  }
  .task-disable-status {
    margin-right: 10px;
    color: #FAAe14;
    border-color: rgba(250,174,20,.16);
    background-color: rgba(250,174,20,.2);
  }
}
.task-no-data {
  .app-nodata-view {
    .app-nodata-img-container {
      padding-top: 0;
    }
  }
}

// 顶部操作区
.task-detail-header {
  padding: 0 12px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
 
  .form-view-row {
    padding: 0;
    
    label {
      width: auto !important;
      // margin: 0;
      // margin-bottom: 6px;
    }
    
    .form-view-row-content {
      white-space: normal;
      @include text-ellipsis;
    }

    .form-view-row-conflictBtn {
      cursor: pointer;
      color: #f56c6c;
      font-size: 12px;
      .icon-info {
        color: #f56c6c;
        vertical-align: bottom;
      }
      .see-action {
        color: $color-primary-light-6;
      }
    }
  }
  
  .task-view-containner {
    .form-view-row {
      label {
        margin-right: 10px;
      }
    }
  }
  
  // 查看全部时间点
  .state-all-btn{
    cursor: pointer;
    margin: 0 0 6px 6px;
    @include fontColor();
    display: inline-block;
  }
  
  .state-button-group {
    display: inline-block;
  }
  
  
  // 审批中
  .approving-img {
    width: 90px;
    position: absolute;
    top: 70px;
    right: 60px;
    z-index: 99;

    img {
      width: 100%;
    }
  }

  &-top {
    min-height: 52px;
    max-height: 78px;
    padding: 10px 0;
    display: flex;
    align-items: baseline;

    // 折叠按钮
    .collapse-btn {
      width: 28px;
      // height: 28px;
      margin-right: 12px;
      text-align: center;
      cursor: pointer;

      border-radius: 4px;
      // border: 1px solid $color-border-l1;

      .iconfont {
        font-size: 20px;
        color: $text-color-regular;
        display: inline-block;
        transition: transform .3s;
      }
    }

    &.active {
      align-items: center;

      .collapse-btn {
        .iconfont {
          transform: rotate(-90deg);
        }
      }
    }

    // 工单流程
    .progress-wrap {
      flex: 1;
      // overflow: hidden;
    }

    // 工单状态
    .task-state {
      margin-left: 30px;
    }

    .linkman-name {
      max-width: 140px;
      min-width: 85px;
      margin-right: 16px;
    }

    .linkman-phone {
      max-width: 160px;
    }

    // 按钮组
    &-btn {
      font-size: 0;

      .el-button {
        margin-left: 12px;

        // 打印工单
        &.once-printed {
          background: $text-color-regular;
          border-color: $text-color-regular;
          color: #fff;
        }
      }
      
      .current-state-button {
        display: inline-block;
      }

      .icon-btn {
        margin-left: 16px;
        font-size: 18px;
        color: #595959;

        &:hover {
          color: $color-primary;
          cursor: pointer;
        }

        &.icon-delete:hover {
          color: $color-danger;
        }
      }
    }

    .task-detail-btn-group {
      display: inline-block;
      position: relative;
      right: 0;

      &-point{
        z-index: 997;
        background: #fff;
      }
    }
  }

  // 客户信息
  .customer-info-wrap {
    margin-right: 30px;
    overflow: hidden;

    flex: 1;
    display: flex;
    align-items: center;

    .customer-name {
      font-size: $font-size-large;
      @include text-ellipsis;
      margin-right: 16px;
    }
  }

  // 联系人
  .linkman-info {
    display: flex;
    align-items: center;

    .linkman-phone {
      .call-phone {
        display: flex;

        span {
          @include text-ellipsis;

          &.call-active {
            cursor: pointer;
          }
        }

        .iconfont {
          margin-left: 6px;
          font-size: 14px;
        }
      }
    }
  }
  .is-conflict {
    height: 190px;
  }
  &-bottom {
    // transition-duration: 300ms;
    height: 140px;
    overflow: hidden;

    &.active {
      height: 0;
    }

    // 客户
    .customer-info-wrap {
      margin-right: 0;
      padding: 4px 0;
      
      .customer-name {
        margin-right: 0;
      }
    }

    &-list {
      display: flex;
      flex-direction: column;
      &-item {
        flex: 1;
        height: auto;
        padding: 10px 20px 0px 3px;
        overflow: hidden;
        overflow-y: auto;
        display: grid;
        grid-template-columns: 300px 300px 800px;
        // &:first-child {
        //   padding-left: 0;
        // }

        // &:last-child {
        //   padding-right: 0;
        // }

        // &:not(:last-child) {
        //   border-right: 1px solid $color-border-l2;
        // }

        // 联系人
        .linkman-info {
          .linkman-name,
          .linkman-phone {
            flex: 1;
            overflow: hidden;
          }
        }

        // 地址
        .address-info {
          .form-view-row-content {
            max-height: 40px;
            display: -webkit-box;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            cursor: pointer;
          }
        }

        .biz-process-time {
          max-height: 46px;
          overflow: auto;

          &-block {
            line-height: 20px;

            &-label {
              color: $text-color-regular;
            }

            &:not(:last-child) {
              margin-bottom: 6px;
            }
          }
        }
      }
    }
  }
}
.base-select-user-dynamic-tab, .base-select-user-dynamic {
  height: 100%;
}
.base-select-user-select-panel-container {
  display: flex;
  height: 100%;
  // height: calc(100% - 50px);
}
.base-select-user-select-panel-left {
  min-width: 270px;
  width: 30%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  .tree-user {
    overflow-x: auto;
    min-height: 266px;
    color: #606266;
    .el-tree-node__content {
      height: 36px;
    }
  }
}

.base-select-user-select-panel-right {
   flex: 1;
    height: 100%;
    overflow-y: auto;
}
.base-select-user-service-provider-right {
 width: 100%;
 height: 100%;
 .base-select-user-infinite-scroll-user {
  height: 100%;
  overflow-y: scroll;
 }
}

// 工单详情
.task-detail-main-content {
  min-height: 100%;
  overflow: unset;

  &-left,
  &-right {
    height: 100%;
    // overflow: hidden;
  }
  &-right {
    position: relative;
    height: auto;
  }

  .collapse-left,
  .collapse-right {
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    color: $text-color-regular;
    border-bottom: 2px solid $color-border-l2;
  }

  // tabs标签页
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    &__header {
      margin: 0;
      background: $bg-color-l2;
      position: sticky;
      top: 0;
      z-index: 9;

      .el-tabs__item {
        padding: 0 24px !important;
        color: $text-color-regular;
        font-weight: normal;
  
        &.is-active {
          @include fontColor();
        }
      }
      .el-tabs__nav{
        display: flex;
        align-items: center;
      }
    }

    &__content {
      flex: 1;
      // overflow: auto;

      .el-tab-pane {
        height: 100%;
      }
    }
  }

  // 审批中图片
  .approving-img {
    width: 75px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 99;

    img {
      width: 100%;
    }
  }

  .task-tab-container {
    position: relative;
    padding: 12px;
    background-color: white;
    
    .btn-group {
      font-size: 0;
      padding: 12px 0;
    }
  }
}

.task-detail-main {
  flex: 1;

  &.normal {
    overflow: auto;
  }

  .base-collapse-left,
  .base-collapse-right,
  .resize-bar {
    height: auto;
  }
}

// 服务报告
.link-of-dropdown {
  color: $text-color-primary;
  display: block;

  &:hover {
    text-decoration: none;
  }
}

// 客户地址地图
.map-address-title {
  width: 60px;
  color: red;
  font-weight: bold;
  
  position: absolute;
  left: -12px;
}

.map-info-window-content {
  width: 260px;
  padding: 12px 12px 8px;
  margin-bottom: 10px;
  position: relative;

  background-color: #fff;
  border-radius: $button-radius-base;

  .customer-name {
    margin-bottom: 6px;
    font-weight: 500;
  }

  p {
    font-size: $font-size-small;
    margin-bottom: 2px;

    label {
      color: $text-color-regular;
      margin-bottom: 0;
    }
  }

  .info-window-arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    
    background: #fff;
    border: 1px solid $color-border-l2;
    border-top-color: #fff;
    border-left-color: #fff;
    transform: rotate(45deg);
  }
}


.amap-container {
  .user-head {
    border-radius: 50%;
    height: 42px;
    width: 42px;
  }
  .amap-user-name {
    background-color: #fff;
    border-radius: 4px;
    height: 30px;
    width: 80px;
    line-height: 30px;
    text-align: center;
    
    position: relative;
    left: 10px;
  }
}

.task-detail-view-panel {
  &-icon {
    position: absolute;
    margin-left: -6px;
  }
}
.layx-window {
  min-height: 320px;
  .base-window-content-body {
    padding: 20px;
    .el-button {
      min-width: auto;
      max-width: auto;
    }
  }
  
  .base-window-content {
    textarea {
      width: 100%;
    }
    
    .base-modal-textarea {
      width: 70%;
    }
    
    p {
      margin-bottom: 8px;
      
      &.tips {
        color: #999;
        font-size: 12px;
      }
      
      &.base-upload-placeholder {
        margin-bottom: 0;
      }
    }
  }
  
  .base-modal-footer {
    text-align: right;
  }
  
  .task-back-dialog {
    p {
      font-size: 12px;
    }
  }
}
// 工单详情的客户名称需要能够复制，客户需求
.link-text {
  user-select: unset;
}

.form-calendar-view-row {
  display: flex;
  align-items: center;
  color: $color-primary;
  >div {
    margin-right: 5px;
  }
  .iconfont {
    color: $color-primary;
  }
}

.task-detail-container .task-plantime-dialog {
  z-index: 50 !important;
}

.textarea-disable-resize{
  resize: none;
}
